<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
     <!-- 导航栏 -->
     <div class="nav">
        <img src="image/导航栏图标.jpg">
        <span>我的博客列表</span>
        <div class="spacer"></div>
        <!-- 这个标签只用于占位 -->
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>
</div>
<!-- 页面主题部分，分左右两部分,中间留5px的缝隙 -->
<!-- 整体宽度为1000px -->
<div class="container">
    <!-- 左侧部分 195px-->
    <div class = "container-left">
        <div class="card">
            <img src="image/博客头像.jpg" alt="">
            <h3>小王不忙</h3>
            <a href="#">gitee地址</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>3</span>
                <span>2</span>
            </div>
        </div>
    </div>
          <!-- 右侧部分 800px-->
    <div class="container-right">
        <h3>我的第一篇博客</h3>
        <div class="date">2023-04-06</div>
        <div class="content">
            <p>
                博客内容如下Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem. Ipsum voluptate laborum sapiente, atque quod eaque quae repellat aspernatur est distinctio! Soluta ut modi vero dolores, repellat ipsam deleniti.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem. Ipsum voluptate laborum sapiente, atque quod eaque quae repellat aspernatur est distinctio! Soluta ut modi vero dolores, repellat ipsam deleniti.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem. Ipsum voluptate laborum sapiente, atque quod eaque quae repellat aspernatur est distinctio! Soluta ut modi vero dolores, repellat ipsam deleniti.
            </p>
            <p>
                博客内容如下Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem. Ipsum voluptate laborum sapiente, atque quod eaque quae repellat aspernatur est distinctio! Soluta ut modi vero dolores, repellat ipsam deleniti.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem. Ipsum voluptate laborum sapiente, atque quod eaque quae repellat aspernatur est distinctio! Soluta ut modi vero dolores, repellat ipsam deleniti.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem. Ipsum voluptate laborum sapiente, atque quod eaque quae repellat aspernatur est distinctio! Soluta ut modi vero dolores, repellat ipsam deleniti.
            </p>
            <p>
                博客内容如下Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem. Ipsum voluptate laborum sapiente, atque quod eaque quae repellat aspernatur est distinctio! Soluta ut modi vero dolores, repellat ipsam deleniti.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem. Ipsum voluptate laborum sapiente, atque quod eaque quae repellat aspernatur est distinctio! Soluta ut modi vero dolores, repellat ipsam deleniti.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, autem. Ipsum voluptate laborum sapiente, atque quod eaque quae repellat aspernatur est distinctio! Soluta ut modi vero dolores, repellat ipsam deleniti.
            </p>
        </div>
    </div>
</div>
</body>
</html>